/* IMPORT FONTS GOOGLE*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

/* GLOBAL */
*,
html,
body {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: var(--bg-primary);
}

html { scroll-behavior: smooth; } 

#plataforma,
#como-funciona,
#recursos,
#planos{ scroll-margin-top: 80px; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --text-primary: #f0f0f5;
  --accent-primary: #8b5cf6;
  --accent-secondary: #3b82f6;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Space Grotesk;
}

p,
button,
span,
a,
li {
  font-family: Inter;
}

a:hover {
  opacity: 0.5;
}

section {
  max-width: 1280px;
}

.main-section-oliverai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}

@media (max-width: 1000px) {
  section {
    max-width: calc(100% - 48px);
  }

  .main-section-oliverai {
    max-width: 100%;
  }
}

/* HEADER */

header {
  background-color: #12121acc;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.container-header-oliverai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48px);
  padding: 0 24px;
  max-width: 1280px;
}

.logo-oliverai {
  height: 52px;
}

@media (max-width: 1000px) {
  .nav-center-oliverai {
    display: none !important;
  }
}

/* SMALL LINK SEC OLIVER AI */

.small-link-sec-oliverai {
  font-size: 14px;
  color: #fff;
  background-color: transparent;

  border: 1px solid var(--accent-primary);
  border-radius: 8px;
  padding: 8px 16px;
}

/* SMALL LINK PRIM OLIVER AI */

.small-link-prim-oliverai {
  font-size: 14px;
  color: #fff;
  background-color: var(--accent-primary);
  font-weight: 500;

  border-radius: 8px;
  padding: 8px 16px;
}

/* ESTRUTURAS */

.display-flex {
  display: flex;
}

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.align-itens-center {
  align-items: center;
}

.flex-direction-column {
  flex-direction: column;
}

.gap-3 {
  gap: 3px;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}

/* FONT SIZES */

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

.font-size-20 {
  font-size: 20px;
}

.font-size-24 {
  font-size: 24px;
}

.font-size-32 {
  font-size: 32px;
}

.font-size-36 {
  font-size: 36px;
}

.font-size-40 {
  font-size: 40px;
}

.font-size-48 {
  font-size: 48px;
}

.font-size-56 {
  font-size: 56px;
}

.font-size-60 {
  font-size: 60px;
  line-height: 64px;
}

@media (max-width: 1000px) {
  .font-size-60 {
    font-size: 48px;
    line-height: 48px;
  }
}

.gradient-text-oliverai {
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-bg-oliverai {
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);
}

.font-medium {
  font-weight: 500;
}

/* CORES */

.text-primary {
  color: var(--text-primary);
}

.text-green {
  color: #28a745;
}

.text-white {
  color: #fff;
}

.color-a78bfa {
  color: #a78bfa;
}

.color-60a5fa {
  color: #60a5fa;
}

.color-22d3ee {
  color: #22d3ee;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-300 {
  color: #d1d5db;
}

.text-gray-200 {
  color: #e5e7eb;
}

.text-violet-300 {
  color: #c4b5fd;
}

.bg-gray-900 {
  background-color: #11182780;
}

.bg-gray-800 {
  background-color: #1f293780;
}

.bg-gray-600 {
  background-color: #4b5563;
}

/* TEXT ALIGN */

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

/* HERO SECTION */

.hero-section-oliverai {
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

.hero-content-oliverai {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 48px;
  padding: 64px 16px;
  max-width: calc(100% - 32px);
}

.container-links-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 1000px) {
  .hero-content-oliverai {
    flex-direction: column;
  }
}

.col-hero-content-oliverai {
  flex: 1;
}

.col-001-hero-content-oliverai {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}

@media (max-width: 1000px) {
  .container-links-hero {
    flex-direction: column;
  }

  .container-links-hero {
    width: 100%;
  }

  .container-links-hero a {
    width: 100%;
    max-width: calc(100% - 64px);
  }
}

/*BADGE PURPLE*/

.badge-purple-oliverai {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #8b5cf61a;
  border-radius: 80px;
  padding: 8px 16px;
  border: solid 1px rgb(139 92 246 / 0.2);
}

/* DOT BADGE */

.dot-green-oliver-ai {
  width: 8px;
  height: 8px;
  background-color: #28a745;
  border-radius: 50%;
  display: inline-block;
  animation: blink 2s infinite ease-in-out;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.title-hero-oliverai {
  max-width: 100%;
}

/* BTN PRIM OLIVERAI */

.btn-prim-oliverai {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: var(--accent-primary);
  border-radius: 12px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* BTN SEC OLIVERAI */

.btn-sec-oliverai {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: transparent;
  border: 1px solid var(--accent-primary);
  border-radius: 12px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* COL 002 HERO CONTENT OLIVERAI */

.col-002-hero-content-oliverai {
  position: relative;
}

.frame-dashboard-oliverai {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
}

.main-frame-dashboard-oliverai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-main-frame-dashboard-oliverai {
  width: 100%;
}

/* GLOW PURPLE OLIVERAI */

.glow-purple-oliverai {
  box-shadow:
    0 0 40px rgba(139, 92, 246, 0.3),
    0 0 80px rgba(139, 92, 246, 0.1);
}

/* CARD GRADIENT OLIVERAI */

.card-gradient-oliverai {
  background: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(18, 18, 26, 0.95) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* DOT STATIC OLIVERAI */

.dot-green-static-oliverai {
  width: 12px;
  height: 12px;
  background-color: #28a745;
  border-radius: 50%;
  display: inline-block;
}

.dot-yellow-static-oliverai {
  width: 12px;
  height: 12px;
  background-color: #ffc107;
  border-radius: 50%;
  display: inline-block;
}

.dot-red-static-oliverai {
  width: 12px;
  height: 12px;
  background-color: #dc3545;
  border-radius: 50%;
  display: inline-block;
}

/* BOX CONTENT FRAME OLIVERAI */

.box-content-frame-oliverai {
  background-color: #12121a;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.user-icon-container-oliverai {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background-color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-info-frame-oliverai {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  flex: 1;
  border-radius: 16px;
  width: 100%;
}

.dot-user-gray-oliver-ai,
.dot-user-gradient-oliver-ai {
  min-width: 24px;
  max-width: 24px;
  min-height: 24px;
  max-height: 24px;
  border-radius: 24px;
}

.dialog-left-oliver-ai {
  padding: 8px 12px;
  border-radius: 0 12px 12px 12px;
}

.container-dialog-right-oliver-ai {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.dialog-right-oliver-ai {
  padding: 8px 12px;
  border-radius: 12px 0 12px 12px;
  background-color: #7c3aed4d;
  border: solid 1px rgb(139 92 246 / 0.3);
  text-align: right;
  max-width: 400px;
}

.notification-lead-oliverai {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background-color: #12121acc;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-lead-oliverai {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #22c55333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*===============================*/

/* OQUE É A OLUVERAI SECTION - OLIVERAI */

.oque-e-a-oliverai-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.header-oque-e-a-oliverai-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.grid-001-oque-e-a-oliverai-section-oliverai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 24px;
  width: 100%;
}

@media (max-width: 1000px) {
  .grid-001-oque-e-a-oliverai-section-oliverai {
    grid-template-columns: 1fr;
  }
}

.grid-001-oque-e-a-oliverai-section-oliverai
  .box-grid-oque-e-a-oliverai-section-oliverai {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  flex: 1;
}

.grid-001-oque-e-a-oliverai-section-oliverai
  .box-grid-oque-e-a-oliverai-section-oliverai
  .icon-box-grid-oque-e-a-oliverai-oliverai {
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-001-box-grid-oque-e-a-oliverai-oliverai {
  background-color: #8b5cf633;
}

.icon-002-box-grid-oque-e-a-oliverai-oliverai {
  background-color: #3b82f633;
}

.icon-003-box-grid-oque-e-a-oliverai-oliverai {
  background-color: #06b6d433;
}

.icon-004-box-grid-oque-e-a-oliverai-oliverai {
  background-color: #22c55333;
}

.icon-005-box-grid-oque-e-a-oliverai-oliverai {
  background-color: #ec489933;
}

.grid-002-oque-e-a-oliverai-section-oliverai {
  width: 100%;
  max-width: calc(100% - 64px);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 32px;
}

@media (max-width: 1000px) {
  .grid-002-oque-e-a-oliverai-section-oliverai {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.grid-002-oque-e-a-oliverai-section-oliverai
  .box-grid-oque-e-a-oliverai-section-oliverai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
}

.font-grotesk {
  font-family: Space Grotesk;
  font-weight: 700;
}

.grid-002-oque-e-a-oliverai-section-oliverai
  .box-grid-oque-e-a-oliverai-section-oliverai
  .icon-box-grid-oque-e-a-oliverai-oliverai {
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px rgb(139 92 246 / 0.3);
  background: linear-gradient(
    to bottom right,
    rgb(139 92 246 / 0.2),
    rgb(59 130 246 / 0.2)
  );
}

.grid-002-oque-e-a-oliverai-section-oliverai
  .box-grid-oque-e-a-oliverai-section-oliverai
  .icon-box-002-grid-oque-e-a-oliverai-oliverai {
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px rgb(59 130 246 / 0.3);
  background: linear-gradient(
    to bottom right,
    rgb(59 130 246 / 0.3),
    rgb(6 182 212 / 0.3)
  );
}

.box-grid-custom-oque-e-a-oliverai-section-oliverai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
}

.grid-002-oque-e-a-oliverai-section-oliverai
  .box-grid-custom-oque-e-a-oliverai-section-oliverai
  .icon-box-grid-oque-e-a-oliverai-oliverai {
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px rgb(139 92 246 / 0.3);
  background: linear-gradient(
    to bottom right,
    rgb(139 92 246 / 0.2),
    rgb(59 130 246 / 0.2)
  );
}

.line2 {
  width: 70px;
  height: 2px;
  background: linear-gradient(
    to left,
    var(--accent-primary) 0%,
    var(--accent-primary) 60%,
    transparent 100%
  );
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
}

.line2-reverse {
  transform: scaleX(-1);
}

/*===============================*/

/* COMO FUNCIONA SECTION - OLIVERAI */

.como-funciona-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.header-como-funciona-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.grid-como-funciona-section-oliverai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  width: 100%;
}

@media (max-width: 1000px) {
  .grid-como-funciona-section-oliverai {
    grid-template-columns: 1fr;
  }
}

.box-grid-como-funciona-oliverai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 16px;
  gap: 16px;
  flex: 1;
}

.number-box {
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.number-box-001 {
  background-color: var(--accent-primary);
}

.number-box-002 {
  background-color: var(--accent-secondary);
}

.number-box-003 {
  background-color: #06b654;
}

.como-funciona-topics-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  width: calc(100% - 32px);
  border-radius: 16px;
  padding: 16px;
}

.como-funciona-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
}

.como-funciona-topic div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #a78bfa;
}

.como-funciona-load-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  width: calc(100% - 32px);
}

.file {
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 8px;
  background-color: #3b82f633;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load {
  width: 200px;
  height: 8px;
  border-radius: 100px;
  background-color: var(--accent-secondary);
}

.como-funciona-apps-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  width: calc(100% - 32px);
}

.app-1 {
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 8px;
  background-color: #22c55e33;
  color: #06b654;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-2 {
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 8px;
  background-color: #8b5cf61a;
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-3 {
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 8px;
  background-color: #3b82f633;
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-adicional-como-funciona-olvierai {
  padding: 16px 32px;
  border-radius: 16px;
  border: solid 1px rgb(139 92 246 / 0.3);
  background: linear-gradient(
    to bottom right,
    rgb(139 92 246 / 0.2),
    rgb(59 130 246 / 0.2)
  );
}

/*===============================*/

/* CAPACIDADE OPERACIONAL SECTION - OLIVERAI */

.capacidade-operacional-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.container-capacidade-operacional-section-oliverai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 0 16px;
  width: calc(100% - 16px);
}

@media (max-width: 1000px) {
  .container-capacidade-operacional-section-oliverai {
    flex-direction: column;
  }
}

.col-capacidade-operacional-section-oliverai {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.box-capacidade-operacional {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  width: calc(100% - 32px);
  background-color: #12121a;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-box {
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box.icon-box-001 {
  background-color: #8b5cf633;
}

.icon-box.icon-box-002 {
  background-color: #3b82f633;
}

.icon-box.icon-box-003 {
  background-color: #06b6d433;
}

.icon-box.icon-box-004 {
  background-color: #22c55e33;
}

.icon-box.icon-box-005 {
  background-color: #ec489933;
}

.box-custom-capacidade-operacional {
  display: flex;
  justify-content: flex-start;

  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  width: calc(100% - 32px);
  border: solid 1px rgb(139 92 246 / 0.3);
  background: linear-gradient(
    to bottom right,
    rgb(139 92 246 / 0.2),
    rgb(59 130 246 / 0.2)
  );
}

.col-002-capacidade-operacional-section-oliverai
  .container-col-002-capacidade-operacional-oliverai {
  padding: 24px;
  border-radius: 24px;
}

.box-icon-profile-agente {
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  border-radius: 120px;
}

.header-col-002-capacidade-operacional-oliverai {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.container-dialog-capacidade-operacional-oliverai {
  padding: 16px 0;
}

.container-box-border-green-capacidade-operacional-oliverai {
  padding: 16px;
  border-radius: 16px;
  border: solid 1px rgb(34 197 94 / 0.5);
  background: #111827cc;
}

.grid-2col-capacidade-operacional {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/*===============================*/

/* INTEGRAÇÕES PODEROSAS SECTION - OLIVERAI */

.integracoes-poderosas-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.header-integracoes-poderosas-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.container-poderosas-section-oliverai {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 48px;
  padding: 32px;
  border-radius: 32px;
  width: calc(100% - 64px);
}

.grid-001-integracoes-poderosas-oliverai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.box-grid-001-integracoes-poderosas-oliverai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  flex: 1;
}

.box-grid-001-integracoes-poderosas-oliverai .left {
  width: 64px;
  height: 64px;
}

@media(max-width: 1000px){
  .box-grid-001-integracoes-poderosas-oliverai .left {
    transform: rotate(90deg);
  }   
}

.icon-box-grid-001-integracoes-poderosas-oliverai {
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
  background-color: #8b5cf633;
  border: solid 1px rgb(139 92 246 / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box-002-grid-001-integracoes-poderosas-oliverai {
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
  background-color: #3b82f633;
  border: solid 1px rgb(59 130 246 / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box-custom-grid-001-integracoes-poderosas-oliverai {
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  border-radius: 12px;
  background-color: #8b5cf633;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 40px rgba(139, 92, 246, 0.3),
    0 0 80px rgba(139, 92, 246, 0.1);
}

.grid-002-integracoes-poderosas-oliverai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  width: 100%;
}

.grid-002-integracoes-poderosas-oliverai div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background-color: #12121a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex: 1;
  font-family: Inter;
  color: #fff;
}

@media (max-width: 1000px) {
  .grid-001-integracoes-poderosas-oliverai {
    grid-template-columns: 1fr;
  }

  .box-grid-001-integracoes-poderosas-oliverai {
    padding: 8px;
  }

  .grid-002-integracoes-poderosas-oliverai {
    grid-template-columns: 1fr;
  }
}

/*===============================*/

/* PERSONALIZACAO TOTAL SECTION - OLIVERAI */

.personalizacao-total-section-oliverai {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.personalizacao-total-container-oliverai {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1000px) {
  .personalizacao-total-container-oliverai {
    flex-direction: column;
  }
}

.col-personalizacao-total-oliverai {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.col-001-personalizacao-total-oliverai {
  padding: 32px;
  border-radius: 24px;
  align-items: center;
  justify-content: center;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  min-height: 128px;
  max-width: 128px;
  max-height: 128px;
  border-radius: 128px;
  border: solid 2px rgb(139 92 246 / 0.5);
  background-image: linear-gradient(
    to bottom right,
    rgb(139 92 246 / 0.3),
    rgb(139 92 246 / 0)
  );
}

.file-upload-personalizacao-total-oliverai {
  width: calc(100% - 32px);
  border-radius: 16px;
  padding: 16px;
  border: solid 1px rgb(31 41 55);
  display: flex;
  align-items: center;
}

.file-001 {
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ef444433;
}

.file-001 svg {
  fill: #f87171;
}

.file-002 {
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f633;
}

.file-002 svg {
  fill: #60a5fa;
}

.file-003 {
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8b5cf61a;
}

.file-003 svg {
  fill: #a78bfa;
}

.content-file {
  width: 100%;
  margin-top: 8px;
}

.content-file p {
  font-size: 14px;
  color: #fff;
}

.progress-bar {
  width: calc(100% - 32px);
  height: 4px;
  border-radius: 100px;
  background-color: #374151;
}

.progress-green {
  background-color: #22c55e;
  height: 100%;
  border-radius: 100px;
}

.progress-purple {
  background-color: #8b5cf6;
  height: 100%;
  border-radius: 100px;
}

.topic-personalizacao-oliverai {
  display: flex;
  gap: 16px;
  align-items: center;
}

.icon-container-personalizacao-oliverai {
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-001-container-personalizacao-oliverai {
  background-color: #8b5cf61a;
}

.icon-001-container-personalizacao-oliverai svg {
  fill: #a78bfa;
}

.icon-002-container-personalizacao-oliverai {
  background-color: #3b82f633;
}

.icon-002-container-personalizacao-oliverai svg {
  fill: #60a5fa;
}

.icon-003-container-personalizacao-oliverai {
  background-color: #22c55322;
}

.icon-003-container-personalizacao-oliverai svg {
  fill: #22c55e;
}

.topic-custom-personalizacao-oliverai {
  padding: 16px 32px;
  border-radius: 16px;
  border: solid 1px rgb(139 92 246 / 0.3);
  background: linear-gradient(
    to bottom right,
    rgb(139 92 246 / 0.2),
    rgb(59 130 246 / 0.2)
  );
}

/*===============================*/

/* CONTROLE TOTAL SECTION - OLIVERAI */

.controle-total-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.header-controle-total-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.container-controle-total-section-oliverai {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 48px;
  padding: 32px;
  border-radius: 32px;
  width: calc(100% - 64px);
}

.grid-001-controle-total-oliverai {
  display: grid;
  width: 100%;
  gap: 24px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width: 1000px) {
  .grid-001-controle-total-oliverai {
    grid-template-columns: 1fr;
  }
}

.box-controle-total-oliverai {
  background: #11182780;
  padding: 16px;
  border-radius: 16px;
  flex: 1;
}

.box-001-controle-total-oliverai .font-size-36 {
  color: #a78bfa;
}

.box-002-controle-total-oliverai .font-size-36 {
  color: #60a5fa;
}

.box-003-controle-total-oliverai .font-size-36 {
  color: #22d3ee;
}

.box-004-controle-total-oliverai .font-size-36 {
  color: #4ade80;
}

@media(max-width: 1000px){
    .info-graph-mobile {
        flex-direction: column;
    }
    .info-graph-mobile-text{
        max-width: 100px;
    }
}

.box-graph-controle-total {
  background: #11182780;
  padding: 24px;
  border-radius: 16px;
  width: calc(100% - 48px);
}

.dot-purple-oliverai {
  width: 12px;
  height: 12px;
  background-color: #8b5cf6;
  border-radius: 50%;
  display: inline-block;
}

.dot-blue-oliverai {
  width: 12px;
  height: 12px;
  background-color: #3b82f6;
  border-radius: 50%;
  display: inline-block;
}

.graph-controle-total-oliverai {
  width: 100%;
  gap: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.graph-controle-total-oliverai .month {
  flex: 1;
  gap: 8px;
}

.graph-controle-total-oliverai .month div {
  width: 100%;
  background-color: #8b5cf6cc;
  border-radius: 8px 8px 0 0;
}

.graph-controle-total-oliverai .month:nth-child(1) div {
  height: 57px;
}

.graph-controle-total-oliverai .month:nth-child(2) div {
  height: 72px;
}

.graph-controle-total-oliverai .month:nth-child(3) div {
  height: 43px;
}

.graph-controle-total-oliverai .month:nth-child(4) div {
  height: 86px;
}

.graph-controle-total-oliverai .month:nth-child(5) div {
  height: 81px;
}

.graph-controle-total-oliverai .month:nth-child(6) div {
  height: 96px;
}

.graph-controle-total-oliverai .month:nth-child(7) div {
  height: 67px;
}

/*===============================*/

/* PORQUE ESCOLHER SECTION - OLIVERAI */

.porque-escolher-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
}

.header-porque-escolher-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.grid-3col-porque-escolher-oliverai {
  width: 100%;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1000px) {
  .grid-3col-porque-escolher-oliverai {
    grid-template-columns: 1fr;
  }
}

.box-grid-3col-porque-escolher-oliverai {
  padding: 24px;
  border-radius: 16px;
}

.box-grid-3col-porque-escolher-oliverai.especial {
  border: solid 3px var(--accent-primary);
}

/*===============================*/

/* IMPLEMENTACAO SECTION - OLIVERAI */

.implementacao-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0 128px 0;
}

.container-implementacao-section-oliverai {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

@media (max-width: 1000px) {
  .container-implementacao-section-oliverai {
    flex-direction: column;
  }
}

.col1-implementacao-oliverai {
  flex: 1;
}

.col2-implementacao-oliverai {
  flex: 1;
}

.icon-box-implementacao {
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.icon-001-box-implementacao {
  background-color: #ef444433;
}

.icon-001-box-implementacao svg {
  fill: #f87171;
}

.icon-002-box-implementacao {
  background-color: #f9731633;
}

.icon-002-box-implementacao svg {
  fill: #fb923c;
}

.icon-003-box-implementacao {
  background-color: #eab30833;
}

.icon-003-box-implementacao svg {
  fill: #facc15;
}

.col2-implementacao-oliverai {
  padding: 24px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.box-normal-implementacao-olivarai {
  background-color: #11182780;
  border-radius: 8px;
  padding: 16px;
}

.text-fb923c {
  color: #fb923c;
}

.text-f87171 {
  color: #f87171;
}

.col2-implementacao-oliverai .divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #cccccc20, #cccccc05);
}

.box-red-implementacao-olivarai {
  background-color: #ef444433;
  border: solid 1px rgb(239 68 68 / 0.3);
  border-radius: 8px;
  padding: 16px;
}

/*===============================*/

/* GRATUITA SECTION - OLIVERAI */

.gratuita-section-oliverai {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 64px 0;

  width: 100%;
  max-width: calc(100%);

  background: linear-gradient(
    to right,
    rgb(139 92 246 / 0.1),
    rgb(59 130 246 / 0.1)
  );

  border-bottom: solid 1px rgb(139 92 246 / 0.2);
  border-top: solid 1px rgb(139 92 246 / 0.2);
}

.badge-green-oliverai {
  background-color: #22c55e1a;
  border: solid 1px rgb(34 197 94 / 0.3);
  padding: 12px 24px;
  border-radius: 100px;
}

.badge-green-oliverai p {
  font-size: 14px;
  font-weight: 600;
  color: #4ade80;
}

.grid-3col-gratuita-oliverai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  gap: 32px;
  margin-top: 32px;
  width: 100%;
  max-width: 896px;
}

.box-grid-gratuita-oliverai {
  flex: 1;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(18, 18, 26, 0.95) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.box-icon-gratuita-oliverai {
  min-width: 56px;
  max-width: 56px;
  max-height: 56px;
  min-height: 56px;
  background-color: #22c55e33;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adicional-info-gratuita {
  margin-top: 32px;
}

@media (max-width: 1000px) {
  .header-gratuita-oliverai {
    padding: 0 32px;
    width: 100%;
    max-width: calc(100% - 64px);
    text-align: center;
  }

  .grid-3col-gratuita-oliverai {
    grid-template-columns: 1fr;
    padding: 0 32px;
    width: 100%;
    max-width: calc(100% - 64px);
  }
}

/*===============================*/

/* PLANOS SECTION - OLIVERAI */

.planos-section-oliverai {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
  width: 100%;
}

.grid-planos-oliverai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  width: 100%;
}

@media (max-width: 1000px) {
  .grid-planos-oliverai {
    grid-template-columns: 1fr;
  }
}

.box-plano-lateral-oliverai {
  display: flex;
  flex-direction: column;
  flex: 1;

  gap: 24px;
  padding: 32px;
  border-radius: 24px;
}

.text-a78bfa {
  color: #a78bfa;
}

.box-plano-central-oliverai {
  display: flex;
  flex-direction: column;
  flex: 1;

  position: relative;

  gap: 24px;
  padding: 32px;
  border-radius: 24px;

  border: solid 2px var(--accent-primary);
}

.box-plano-central-oliverai .badge {
  position: absolute;
  top: -12px;
  left: calc(50% - 51px);

  background-color: var(--accent-primary);

  font-family: Space Grotesk;
  color: #fff;
  font-size: 14px;
  font-weight: 600;

  padding: 4px 8px;
  border-radius: 100px;
}

.text-a78bfa {
  color: #a78bfa;
}

.link-planos-oliverai {
  height: 50px;
  border: solid 1px var(--accent-primary);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-prim-planos-oliverai {
  background-color: var(--accent-primary);
}

/*===============================*/

/* CTA SECTION - OLIVERAI */

.cta-section-olivarai {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 64px 0;
}

.container-cta-oliverai {
  width: 100%;

  padding: 64px 32px;
  border-radius: 24px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 32px;
}

.container-cta-oliverai h1 {
  max-width: 700px;
  text-align: center;
  line-height: 36px;
}

.cta-link-prim-oliverai {
  background-color: var(--accent-primary);
  border-radius: 16px;

  display: flex;
  align-items: center;

  gap: 16px;

  padding: 20px 48px;

  font-size: 18px;
  font-weight: 600;
  color: #fff;

  cursor: pointer;
}

.cta-link-sec-oliverai {
  height: 46px;
  border: solid 1px var(--accent-primary);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  padding: 0 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .cta-link-2-container {
    flex-direction: column;
  }
  .cta-link-sec-oliverai {
    text-align: center;
  }
}

/*===============================*/

/* FOOTER - OLIVERAI */

footer {
  width: calc(100% - 48px);
  padding: 48px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: solid 1px #cccccc15;
}

footer .container-footer {
  width: 100%;
  max-width: 1280px;
}

@media (max-width: 1000px) {
  footer .container-footer {
    flex-direction: column;
    gap: 32px;
  }

  .text-align-center-on-mobile {
    text-align: center;
  }
}